<style lang="less" scoped>
  .box-panel {
    position: relative;
    min-height: 20vh;
  }

  .box-panel-header {
    padding: 15px 25px;
    border-bottom: 1px solid #eee;
    position: relative;
  }

  .b-p-h-title {
    line-height: 34px;
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    color: #333;
  }

  .box-panel-body {
    padding: 25px 24px;
  }

  .search {
    width: 70%;
    margin: auto;
    height: 60px;
    line-height: 60px;
    display: flex;
  }

  .search-inpt {
    flex: 1;
  }

  .search-but {
    width: 72px;
  }

  .add-but {
    padding: 5px 2px 10px 0;
    text-align: right;
  }

  .Paging_b {
    text-align: right;
    margin-top: 30px;
    margin-bottom: 20px;
  }
</style>

<template>
  <div class="box-panel">
    <div class="box-panel-header">
      <span class="b-p-h-title">{{item_title}}</span>
    </div>
    <div class="box-panel-body">
      <div class="search">
        <div class="search-inpt">
          <el-input placeholder="账户/昵称（模糊查询）" v-model="str" clearable @clear="search">
          </el-input>
        </div>
        <div class="search-but">
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
      </div>
      <div class="add-but">
        <el-button type="primary" @click="openAdd">新增</el-button>
      </div>
      <div class="tables">
        <el-table stripe :data="formData" :header-cell-style="{background:'#F5F7FA',color:'#606266'}" row-key="id"
          border :indent="20" style="width: 100%;min-width: 680px;">
          <el-table-column prop="username" label="账户" min-width="15%" align="center">
          </el-table-column>
          <el-table-column prop="nike" label="账户昵称" min-width="15%" align="center">
          </el-table-column>
          <el-table-column prop="group_name" label="所属分组" min-width="15%" align="center">
          </el-table-column>
          <el-table-column prop="out_time" label="最近登录有效时间" min-width="25%" align="center">
          </el-table-column>
          <el-table-column label="操作" min-width="25%" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="openEdit(scope.row)"
                style="margin: 0 5px;">
              </el-button>
              <el-popover placement="top" v-model="scope.row.del_visible" style="margin: 0 5px;">
                <p>确定要删除当前数据吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="scope.row.del_visible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="delInfo(scope.row.id,scope.$index)">确定</el-button>
                </div>
                <el-button slot="reference" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
              </el-popover>

            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block Paging_b">
        <el-pagination @size-change="size_change" @current-change="current_change" :current-page.sync="current_page"
          :page-sizes="page_sizes" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
          :total="total" v-if="total != 0"></el-pagination>
      </div>
    </div>

    <div id="Dialog">
      <div class="add_D">
        <el-dialog title="新增账户" :visible.sync="add_Dialog" :width="dialogWidth" :close-on-click-modal="false"
          :close-on-press-escape="false">
          <el-form :model="add_data">
            <el-form-item label="账户：" :label-width="dialogLabelWidth" clearable>
              <el-input v-model="add_data.username" autocomplete="off" placeholder="必填项" clearable style="width: 80%;">
              </el-input>
              <span style="color: red;padding-left: 5px;">*</span>
            </el-form-item>

            <el-form-item label="昵称：" :label-width="dialogLabelWidth" clearable>
              <el-input v-model="add_data.nike" autocomplete="off" placeholder="选填项" clearable style="width: 80%;">
              </el-input>
            </el-form-item>

            <el-form-item label="密码：" :label-width="dialogLabelWidth" clearable>
              <el-input v-model="add_data.password" autocomplete="off" placeholder="必填项" clearable style="width: 80%;">
              </el-input>
              <span style="color: red;padding-left: 5px;">*</span>
            </el-form-item>

            <el-form-item label="确认密码：" :label-width="dialogLabelWidth" clearable>
              <el-input v-model="add_data.confirm_password" autocomplete="off" placeholder="必填项" clearable
                style="width: 80%;"></el-input>
              <span style="color: red;padding-left: 5px;">*</span>
            </el-form-item>

            <el-form-item label="所属分组：" :label-width="dialogLabelWidth" clearable>
              <el-select v-model="add_data.group_id" placeholder="请选择" style="width: 80%;">
                <el-option v-for="item in group_list" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <span style="color: red;padding-left: 5px;">*</span>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="offAdd">取 消</el-button>
            <el-button type="primary" @click="subAdd">确 定</el-button>
          </div>
        </el-dialog>
      </div>

      <div class="edit_D">
        <el-dialog title="编辑账户信息" :visible.sync="edit_Dialog" :width="dialogWidth" :close-on-click-modal="false"
          :close-on-press-escape="false">
          <el-form :model="edit_data">
            <el-form-item label="ID：" :label-width="dialogLabelWidth" clearable>
              <el-input v-model="edit_data.id" autocomplete="off" clearable style="width: 80%;" disabled>
              </el-input>
            </el-form-item>
            <el-form-item label="账户：" :label-width="dialogLabelWidth" clearable>
              <el-input v-model="edit_data.username" autocomplete="off" placeholder="必填项" clearable style="width: 80%;">
              </el-input>
              <span style="color: red;padding-left: 5px;">*</span>
            </el-form-item>

            <el-form-item label="昵称：" :label-width="dialogLabelWidth" clearable>
              <el-input v-model="edit_data.nike" autocomplete="off" placeholder="选填项" clearable style="width: 80%;">
              </el-input>
            </el-form-item>

            <el-form-item label="密码：" :label-width="dialogLabelWidth" clearable>
              <el-input v-model="edit_data.password" autocomplete="off" placeholder="选填项,输入就代表修改" clearable
                style="width: 80%;">
              </el-input>
            </el-form-item>

            <el-form-item label="所属分组：" :label-width="dialogLabelWidth" clearable>
              <el-select v-model="edit_data.group_id" placeholder="请选择" style="width: 80%;">
                <el-option v-for="item in group_list" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <span style="color: red;padding-left: 5px;">*</span>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="offEdit">取 消</el-button>
            <el-button type="primary" @click="subEdit">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
  import $R from "../../js/common/request";
  import $P from "../../js/common/public";
  export default {
    data() {
      return {
        item_title: this.$route.meta.item_title,
        str: '',
        formData: [],

        dialogWidth: "560px",
        dialogLabelWidth: "120px",

        // 新增
        add_Dialog: false,
        add_data: {
          "username": "",
          "nike": "",
          "password": "",
          "confirm_password": "",
          "group_id": "",
        },

        edit_Dialog: false,
        edit_data: {
          "id": "",
          "username": "",
          "nike": "",
          "password": "",
          "group_id": "",
        },

        group_list: [],

        // 翻页
        total: 0, //总条数
        page_size: $P.Page_sizes[0], //每页显示条数
        page_sizes: $P.Page_sizes, //每页显示条数可选择的数组
        current_page: 1 //当前页数
      };
    },
    mounted() {
      this.init();
      this.groupList();
    },
    methods: {
      // 初始化
      init() {
        self = this;
        $P.openLoad();
        $R.Admin.adminList({
          params: Object.assign({ str: self.str, page: self.current_page, limit: self.page_size }),
          success(res) {
            self.formData = [];
            res.data.forEach((item, i) => {
              item['del_visible'] = false;
              self.formData.push(item);
            });

            self.total = res.total;
            setTimeout(function () {
              $P.closeLoad();
            }, "200");
          },
          error() {
            $P.closeLoad();
          }
        });
      },
      // 搜索
      search() {
        let self = this;
        self.current_page = 1;
        self.page_size = $P.Page_sizes[0];
        self.init();
      },
      // 分组列表
      groupList() {
        let self = this;
        $R.Group.gList({
          success(res) {
            self.group_list = res;
          },
          error() {
            $P.closeLoad();
          }
        });
      },
      // 打开新增窗口
      openAdd() {
        let self = this;
        $P.openLoad();
        self.add_data = {
          "username": "",
          "nike": "",
          "password": "",
          "confirm_password": "",
          "group_id": "",
        }
        setTimeout(function () {
          self.add_Dialog = true;
          $P.closeLoad();
        }, "200");
      },
      // 关闭新增窗口
      offAdd() {
        let self = this;
        self.add_Dialog = false;
        self.add_data = {
          "username": "",
          "nike": "",
          "password": "",
          "confirm_password": "",
          "group_id": "",
        }
      },
      // 提交新增
      subAdd() {
        let self = this;
        $P.openLoad();
        if (self.ifSubAdd()) {
          $R.Admin.adminRegister({
            params: Object.assign(self.add_data),
            success(res) {
              self.offAdd();
              self.search();
            },
            error() {
              $P.closeLoad();
            }
          });
        }
      },
      // 提交判断
      ifSubAdd() {
        if ($P.Invalid(self.add_data.username)) {
          $P.Msg("请填写账户名称！", 4);
          setTimeout(function () {
            $P.closeLoad();
          }, "500");
          return false;
        }

        if ($P.Invalid(self.add_data.password)) {
          $P.Msg("请填写账户密码！", 4);
          setTimeout(function () {
            $P.closeLoad();
          }, "500");
          return false;
        }

        if (self.add_data.password.length <= 2 || self.add_data.password.length > 20) {
          $P.Msg("密码长度为 3-20！", 4);
          setTimeout(function () {
            $P.closeLoad();
          }, "500");
          return false;
        }

        if (self.add_data.password != self.add_data.confirm_password) {
          $P.Msg("两次密码不一致！", 4);
          setTimeout(function () {
            $P.closeLoad();
          }, "500");
          return false;
        }

        if ($P.Invalid(self.add_data.group_id)) {
          $P.Msg("请选择所属分组！", 4);
          setTimeout(function () {
            $P.closeLoad();
          }, "500");
          return false;
        }

        let count = 0;
        self.group_list.forEach((item) => {
          if (item.id == self.add_data.group_id) {
            count++;
          }
        });

        if (count == 0) {
          $P.Msg("选择所属分组出错，请联系管理员！", 4);
          setTimeout(function () {
            $P.closeLoad();
          }, "500");
          return false;
        }
        return true;
      },

      // 打开编辑窗口
      openEdit(data) {
        let self = this;
        $P.openLoad();
        self.edit_data = { ...data };
        setTimeout(function () {
          self.edit_Dialog = true;
          $P.closeLoad();
        }, "200");
      },
      offEdit() {
        let self = this;
        self.edit_Dialog = false;
        setTimeout(function () {
          self.edit_data = {
            "id": "",
            "username": "",
            "nike": "",
            "password": "",
            "group_id": "",
          }
        }, "200");
      },
      subEdit() { 
        let self = this;
        $P.openLoad();
        if (self.ifSubEdit()) {
          $R.Admin.adminModify({
            params: Object.assign(self.edit_data),
            success(res) {
              self.offEdit();
              self.search();
            },
            error() {
              $P.closeLoad();
            }
          });
        }
      },
      ifSubEdit() {
        if ($P.Invalid(self.edit_data.id)) {
          $P.Msg("请选择有效的账户进行修改！", 4);
          setTimeout(function () {
            $P.closeLoad();
          }, "500");
          return false;
        }
        if ($P.Invalid(self.edit_data.username)) {
          $P.Msg("请填写账户名称！", 4);
          setTimeout(function () {
            $P.closeLoad();
          }, "500");
          return false;
        }

        if (!$P.Invalid(self.edit_data.password)) {
          if (self.edit_data.password.length <= 2 || self.edit_data.password.length > 20) {
            $P.Msg("密码长度为 3-20！", 4);
            setTimeout(function () {
              $P.closeLoad();
            }, "500");
            return false;
          }
        }

        if ($P.Invalid(self.edit_data.group_id)) {
          $P.Msg("请选择所属分组！", 4);
          setTimeout(function () {
            $P.closeLoad();
          }, "500");
          return false;
        }

        let count = 0;
        self.group_list.forEach((item) => {
          if (item.id == self.edit_data.group_id) {
            count++;
          }
        });

        if (count == 0) {
          $P.Msg("选择所属分组出错，请联系管理员！", 4);
          setTimeout(function () {
            $P.closeLoad();
          }, "500");
          return false;
        }
        return true;
      },


      // 删除指定数据
      delInfo(id, i) {
        self = this;
        $P.openLoad();
        $R.Admin.adminDel({
          params: Object.assign({ id: id }),
          success(res) {
            self.init();
            // setTimeout(function () {
            //   $P.closeLoad();
            // }, "200");
          },
          error() {
            $P.closeLoad();
          }
        });
      },

      //======================================翻页功能======================================
      // pageSize 改变时会触发  -- 切换当前显示条数
      size_change(val) {
        self = this;
        self.page_size = val;
        self.init();
      },
      //currentPage 改变时会触发 -- 翻页功能
      current_change(val) {
        self = this;
        self.current_page = val;
        self.init();
      },
    },
    computed: {}
  };
</script>